<template>
<div class="car-main-content">
    <div class="container-1200">
      <div class="wy-main-title wy-m-t-20">
          <p>首页  /  物流信息服务  /   <span>车源信息</span></p>
      </div>
     
      <!-- 搜索 -->
      <div class="car-search-box">
          <a-form :form="form">
              <a-row :gutter="24">
                  <a-col :span='7' class="s-place-260">
                      <a-form-item label="车辆常驻地："  :label-col="{ span: 7}" :wrapper-col="{ span:16 }">
                          <a-input v-model="residence" placeholder="请选择车辆到达地" readOnly @click="magSvgShowMap('destinationCar')"/>
                      </a-form-item>
                  </a-col>
                  <a-col :span='7' class="s-place-260" :offset="1">
                      <a-form-item label="车辆类型："  :label-col="{ span: 6}" :wrapper-col="{ span:16}">
                            <a-select placeholder="全部" v-model="vehicleType" @change="carTypeChange">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.dictKey" v-for="(item,index) in carTypeList" :key="index">{{item.dictValue}}</a-select-option>
                            </a-select>
                      </a-form-item>
                  </a-col>
                  <a-col :span='3'>
                      <a-button type="primary" :span='2' style='margin:0 0 0 38px;' class='ant-btn-primary' @click="infoCarGetCargoByType">立即搜索</a-button>
                  </a-col>
                  <a-col :span='3'>
                      <a-button :span='2' style='margin:0 20px 0 12px;'  @click="reset">重置信息</a-button>
                  </a-col>
              </a-row>
              <a-row :gutter="24">
                    <a-col :span='8' class="s-place-260">
                        <a-form-item label="车源类型："  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                            <a-select placeholder="请选择车源类型" style="width: 260px !important;height:40px;" @change="caresourceType" v-model="type">
                              <a-select-option value=""> 不限 </a-select-option>
                              <a-select-option value="0"> 本地车 </a-select-option>
                              <a-select-option value="1"> 回程车 </a-select-option>
                            </a-select>
                        </a-form-item>                     
                    </a-col>
                    <a-col :span='6' class="s-place-260 car-lengths car-kg">
                        <a-form-item label="载重："  :label-col="{ span: 7}" :wrapper-col="{ span:16 }">
                            <a-select placeholder="全部" v-model="weightKey" @change="zhonglianChange">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.dictKey" v-for="(item,index) in zaizhongList" :key="index">{{item.dictValue}}{{(zaizhongList.length-1)==index?'吨以上':'吨'}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :span='7' class="s-place-260 car-lengths">
                        <a-form-item label="车长："  :label-col="{ span: 6}" :wrapper-col="{ span:16}">
                            <a-select placeholder="全部" v-model="lengthKey" @change="carlengthChange">
                                  <a-select-option value="">全部</a-select-option>
                                  <a-select-option :value="item.dictKey" v-for="(item,index) in carlengthList" :key="index">{{item.dictValue}}{{(carlengthList.length-1)==index?'米以上':'米'}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
              </a-row>
          </a-form>
      </div>
       <!--热门线路 -->
  <!--     <div class="r-hot-way info-1200">
        <div class="r-hot-title">
          <span></span>
          <span>热门线路</span>
          <img src="./../../../static/img/index/hot.png" style="margin-left:10px ; margin-top:-3px;">
        </div>
        <div class="r-hot-city">
          <ul>
            <li v-for="(item,index) in hotLineList" :key="index"  @click="cityChange(item)">
                  <span>{{item.departureCity}}</span>
                  <span></span>
                  <span>{{item.destinationCity}}</span>
            </li>
          </ul>
        </div>
     </div> -->
      <!-- 城市 -->
      <div class="car-city-content">
          <!-- <div class="r-hot-title">
             <span></span>
             <span class="r-city">昆明市</span>
             <span></span>
             <span class="r-city">天津市</span>
          </div> -->
          <div class='v-list'>
            <a-row class="v-list-title">
                    <a-col :span='14' class="ve-right-line">车源信息</a-col>
                    <a-col :span='7' class="ve-right-line">发布信息</a-col>
                    <a-col :span='3'>查看</a-col>
            </a-row>
            <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                <a-row>
                      <a-col :span='14' class="v-box">
                         <div class="v-box-img">
                            <!-- <img :src="FileUploadUrl2+item.vehiclePics || 'http://124.207.149.202/wly/static/img/chain/gy1-1.jpg'"> -->
                            <img :src="FileUploadUrl2+item.vehiclePics">
                         </div>
                         <div class="car-img-detail">
                            <a slot="title">
                              {{item.beginPlace}}
                            </a>
                            <span class="car-place"></span>
                            <a slot="title" class="wy-text-nowrap wy-text-over">{{item.endPlace}}</a>
                          <p>{{item.carTitle}}</p>
                          <p>
                            <span style="display:block;">
                              车辆：
                              {{item.licence}}/
                              <i>{{item.vehicleTypeValue}}/</i>
                              {{item.length}}米
                            </span>
                            <span>常驻地：{{item.residence}}</span>
                            <span style="margin-left: 25px" v-if='item.expectedPrice'>运价：{{item.expectedPriceDisplay}}元</span>
                            <span style="margin-left: 25px" v-if='!item.expectedPrice'>运价：面议</span>
                            <span style="display:block;width:360px;margin-left:15px;" class="wy-text-nowrap">说明：{{item.remarks}}</span>
                          </p>
                          </div>
                      </a-col>
                      <a-col :span='7' class="v-box v-company">
                         <div style="margin-top:30px;">
                            <a slot="title" v-if="item.userCompanyVo">
                              {{item.userCompanyVo.company}}
                             </a>
                          <div class="useStar">
                            <span></span>
                            <span> 用户星级</span>
                            <a-rate v-if="item.userCompanyVo" :defaultValue="item.userCompanyVo.userStarLevel" disabled allowHalf />
                              <div class="attestaion" v-if="item.userCompanyVo == null"></div>
                              <div class="attestaion" v-if="item.userCompanyVo != null">{{item.userCompanyVo.attestationStatusValue}}</div>
                          </div>
                        </div>
                      </a-col>
                      <a-col :span='3' class="v-box wy-p-l-15">
                            <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='wy-m-b-15 wy-m-t--10' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                            <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='wy-m-b-15 wy-m-t--10' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                            <router-link v-if="!loggedIn" to="/login"><a-button  class='wy-m-b-15 wy-m-t--10' type="primary">立即沟通</a-button></router-link>
                             <br/>
                            <nuxt-link class="wy-m-b-15" :to="`/info/vehicle/${item.vehicleinfoId}`">
                              <a-button>查看详情</a-button>
                            </nuxt-link>
                            <p class="v-box-time release_time" ><span></span>{{item.createTime&&item.createTime.split(' ')[0]}}
                            </p>
                      </a-col>
                </a-row>
              </a-list-item>
            </a-list>     
          </div>
      </div>
       <!-- 立即沟通弹框 -->
      <Elastic  ref='elastic'></Elastic>
      <!-- 提示认证弹框 -->
      <Elastics  ref='elastics'></Elastics>
        <!--地图Svg显示位置-->
      <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
    </div>
  <!--   <div class="vehicle-pic">
        <nuxt-link to="../../corp">
          <img src="./../../../static/img/info/goodsBanner.jpg">
        </nuxt-link>
    </div> -->
</div>
</template>

<script>

import Elastic from './../../../components/dialog/Elastic'
import Elastics from './../../../components/dialog/Elastics'
import { environment } from '@/server/environment'
import AuthMixin from '~/mixins/auth'
export default {
  mixins: [ AuthMixin ],
   components: {
         Elastic,
         Elastics,
    },
  data () {
    return {
      //数据列表
      listData: [],
      FileUploadUrl2:environment.FileUploadUrl2,
      // 热门线路列表
      hotLineList: [],
      destinationCar: '',
      residence: '',//常驻地
      type: '',//车源类型
      vehicleType: '',//车辆类型
      lengthKey: '',//车长
      weightKey: '',//载重
      carTypeList: [],
      zaizhongList: [],//载重
      carlengthList: [],//车长
      // 线路城市动态数据定义
      lineCityList: [
        { city: '昆明', liList: [], waiList: [] },
        { city: '大理', liList: [], waiList: [] },
        { city: '玉溪', liList: [], waiList: [] },
      ],
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 7,
        // showSizeChanger: true,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`,
        onChange: (page) => {
          this.pagination.current = page
          this.infoCarGetCargoByType()
        }
      },
   
    }
  },
    beforeCreate(){
      this.form = this.$form.createForm(this);
    },
    created: function(){
        this.infoCommonDict(5);
        this.infoCommonDict(17);//载重
        this.infoCommonDict(18);//车长
        this.lineGetLinesHot();
        this.infoCarGetCargoByType();
    },
    methods:{
      async lineGetLinesHot () {
        const res = await this.$store.dispatch('info/infoCarGetCargoByType',{
          pageSize: 10,
          pageIndex: 1,
          hotLine: 1
        })
        if (res.status) {
          this.hotLineList = res.data.rows || [];
        } 
    },
      //获取车源列表查询
      async infoCarGetCargoByType () {
            const res = await this.$store.dispatch('info/infoCarGetCargoByType',{
              pageSize: this.pagination.pageSize,
              pageIndex: this.pagination.current,
              residence:this.residence,//常驻地
              type: this.type,//车源类型
              vehicleType: this.vehicleType,//车辆类型
              lengthKey: this.lengthKey,//车长
              weightKey: this.weightKey,//载重
              departureCity: this.departureCity,//出发
              destinationCity: this.destinationCity,//到达
            })
            if (res.status) {
              this.listData = res.data.rows;
              this.pagination.total = res.data.total;
              // console.log(this.listData,11);
            } 
      },
      // 字典数据获取
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 5: this.carTypeList = res.data.rows; break;
              case 17: this.zaizhongList = res.data.rows; break;
              case 18: this.carlengthList = res.data.rows; break;
            }
          } 
      },
      //热门城市搜索
      cityChange(item){
         this.departureCity =  item.departureCity;
         this.destinationCity = item.destinationCity;
         this.infoCarGetCargoByType();
      },
      
      // 车辆类型切换
      carTypeChange(key){
        this.vehicleType = key;
      },
       //车源类型
      caresourceType(value){
        this.type = value;
        console.log(this.type);
      },
      // 载重
      zhonglianChange (value) {
        this.weightKey = value;
      },
      // 车长
      carlengthChange(value){
        this.length = length;
      },
      // 重置
      reset () {
          this.residence = '';//常驻地
          this.type = '';//车源类型
          this.vehicleType = '';//车辆类型
          this.lengthKey = '';//车长
          this.weightKey = '';//载重
          this.infoCarGetCargoByType();
      },
      //弹框展示
      elasticShowModal(id){
          this.$refs.elastic.showModal(id);
      },
      TipsShowModal(id){
          this.$refs.elastics.warning(id);
      },
      mapSvgCall (d) {
        // this[d.name] = d.city;
        if(d.name == 'destinationCar'){
          // this.residence = d.city;
          this.residence = d.provCityArea;
        }

    },
      // 车辆常驻地地图
    magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
    },
      // 调用距离返回
    distanceCall (num) {
    }
  }
}

</script>
<style lang="scss">
@import "./../../../assets/css/info/carinformation.scss";
.release_time{
  width: 104px;
}
.car-search-box{
  .ant-form{
      width:  1200px;
      margin-bottom: 10px;
  }
}
.ve-right-line{
  border-right:1px solid  #EFEFEF;
}

.wy-text-over{
  width: 200px;
 .r-hot-way{
      margin-top:20px;
      height:180px;
       .r-hot-city{
         ul {
            margin:0;
            padding:0;
           li{
              width:200px;
              height:40px;
              float:left;
              margin-right:20px;
              margin-top:20px;
              background:#E9F4F3;
              font-size:14px;
              text-align:center;
              line-height:40px;
              a{
                 color:#15837A;
              }
              span:nth-child(2){
               width:16px;
               height:1px;
               background:#15837A;
               margin:0 10px;
               display:inline-block;
               vertical-align:middle;
              }
             }
             li:nth-child(5){
                margin-right:0;
             }
              li:nth-child(10){
                margin-right:0;
             }
             li:hover{
                 background:#15837A;
                 cursor: pointer;
                 a,span{
                    color:#FFFFFF;
                 }
                 span:nth-child(2){
                  background:#FFFFFF;
                 }
             }
         }
       }
   }
}
</style>